import {Collapse, Form, Row, Col, Input, Select, InputNumber} from 'antd'
import React, {
	forwardRef,
	useEffect,
	useImperativeHandle,
	useState,
} from 'react'
import type {UploadFile} from 'antd/es/upload/interface'
import styles from './index.less'
import Upload from '@/components/Upload'
import {getUrlData} from '../data'
import OtherUpload from './OtherUpload'

const {Panel} = Collapse
const {Option} = Select

type PropsType = {
	type: string | undefined
	dictData: any
	dataSource: any
	enclosureList: any[]
}

const assets = (props: PropsType, ref: any) => {
	const {type, dictData, dataSource, enclosureList} = props
	const [businessForm] = Form.useForm()
	const [businessSituationForm] = Form.useForm()
	const [urlData, setUrlData] = useState<any>({})
	const [fileList, setFileList] = useState<UploadFile[]>([])
	const [otherDocumentsList, setOtherDocumentsList] = useState<UploadFile[]>(
		[],
	)
	const [serviceOtherDocumentList, setServiceOtherDocumentList] = useState<
		UploadFile[]
	>([])

	useEffect(() => {
		if (type !== 'add') {
			const data = dataSource?.assetInfo
			businessForm.setFieldsValue({
				...data,
				city: data?.cityId ? [data?.provinceId, data?.cityId] : '',
				isHolding: data?.isHolding === 0 ? undefined : data?.isHolding,
			})
			businessSituationForm.setFieldsValue({
				businessModel: data?.businessModel,
			})
			const newUrlData = getUrlData(data, 'DYY_GYS')
			setUrlData(newUrlData)
		} else {
			businessForm.setFieldsValue({
				...dataSource,
				city: dataSource?.cityId
					? [dataSource?.provinceId, dataSource?.cityId]
					: '',
			})
			businessSituationForm.setFieldsValue({
				businessModel: dataSource?.businessModel,
			})
		}
	}, [type, dataSource])

	const customizeHeader = (value: string) => (
		<div>
			<div className={styles.tip} />
			{value}
		</div>
	)
	const onSubmit = async () => {
		const businessValue = await businessForm.validateFields()
		const businessSituationValue =
			await businessSituationForm.validateFields()
		if (businessValue && businessSituationValue) {
			return {
				...businessValue,
				...businessSituationValue,
				...urlData,
			}
		}
		return {}
	}
	useImperativeHandle(ref, () => ({
		getData: onSubmit,
	}))

	const callBack = (value: string | number, key: any) => {
		const data = {...urlData}
		data[value] = key
		setUrlData(data)
	}

	const uploadDom = (targetAttr: number, name: string) => {
		const uploadProps: any = {
			key: targetAttr,
			modelName: 'spAccess',
			targetAttr,
			callback: (key: string) => {
				callBack(name, key)
			},
		}
		if (type !== 'add') {
			const newData = enclosureList?.find(
				(item: {targetAttr: number}) => item?.targetAttr === targetAttr,
			)
			if (newData) {
				uploadProps.fileList = [
					{
						uid: newData?.targetAttr,
						name: newData?.filename,
						url: newData?.url,
					},
				]
			}
		}
		return (
			<>
				{' '}
				<Upload {...uploadProps} />{' '}
			</>
		)
	}

	return (
		<div className={styles.assets}>
			<Collapse
				defaultActiveKey={['1', '2', '3']}
				ghost
				expandIconPosition="end"
				collapsible="header">
				<Panel header={customizeHeader('工商信息')} key="1" forceRender>
					<Form
						form={businessForm}
						name="basic"
						layout="horizontal"
						labelCol={{flex: '140px'}}
						labelAlign="right"
						labelWrap
						autoComplete="off"
						disabled={type === 'view' || type === 'process'}>
						<Row gutter={12}>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="企业法人"
									name="legalPerson"
									rules={[
										{
											required: true,
											max: 6,
										},
									]}>
									<Input
										placeholder={
											type === 'view' ||
											type === 'process'
												? '-'
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="是否代持"
									name="isHolding"
									rules={[{required: true}]}>
									<Select
										placeholder={
											type === 'view' ? '-' : '请选择'
										}
										allowClear>
										<Option value={1}>是</Option>
										<Option value={2}>否</Option>
									</Select>
								</Form.Item>
							</Col>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="实际控制人"
									name="actualController"
									rules={[
										{
											required: true,
											max: 6,
										},
									]}>
									<Input
										placeholder={
											type === 'view' ||
											type === 'process'
												? '-'
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="注册地址"
									name="registeredAddress"
									rules={[
										{
											required: true,
											max: 50,
										},
									]}>
									<Input
										placeholder={
											type === 'view' ||
											type === 'process'
												? '-'
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="实际办公地址"
									name="actualOfficeAddress"
									rules={[
										{
											max: 50,
										},
									]}>
									<Input
										placeholder={
											type === 'view' ||
											type === 'process'
												? '-'
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="固定电话"
									name="telephone"
									rules={[
										{
											pattern:
												/^(((\d{3,4})?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/,
											message: '填写的电话格式有误',
										},
									]}>
									<Input
										placeholder={
											type === 'view' ||
											type === 'process'
												? '-'
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="注册资本/元"
									name="registeredCapital"
									rules={[
										{
											required: true,
										},
										{
											pattern:
												/^([0-9]|[1-9]\d+)(\.\d{0,2})?$/,
											message: '小数点后不得超过两位',
										},
									]}>
									<InputNumber
										placeholder={
											type === 'view' ||
											type === 'process'
												? '-'
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="实缴资本/元"
									name="actualCapital"
									rules={[
										{
											required: true,
										},
										{
											pattern:
												/^([0-9]|[1-9]\d+)(\.\d{0,2})?$/,
											message: '小数点后不得超过两位',
										},
									]}>
									<InputNumber
										placeholder={
											type === 'view' ||
											type === 'process'
												? '-'
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
						</Row>
						<table border="1" className={styles.uploadWrap}>
							<tr>
								<td className={styles.required}>营业执照</td>
								<td>{uploadDom(14, 'businessLicenseUrl')}</td>
								<td>历史变更登记</td>
								<td>
									{uploadDom(15, 'historicalRegistrationUrl')}
								</td>
								<td>工商年检</td>
								<td>
									{uploadDom(16, 'businessInspectionUrl')}
								</td>
							</tr>
							<tr>
								<td>办公租赁合同</td>
								<td>{uploadDom(17, 'officeContractUrl')}</td>
								<td>公司股东情况</td>
								<td>
									{uploadDom(18, 'shareholderConditionUrl')}
								</td>
								<td>经营范围资质</td>
								<td>
									{uploadDom(19, 'scopeQualificationUrl')}
								</td>
							</tr>
							<tr>
								<td colSpan={6}>
									<OtherUpload
										targetAttr={32}
										urlName="otherDocumentsUrl"
										fileList={otherDocumentsList}
										setFileList={setOtherDocumentsList}
										enclosureList={enclosureList}
										urlData={urlData}
										setUrlData={setUrlData}
									/>
								</td>
							</tr>
						</table>
					</Form>
				</Panel>
				<Panel header={customizeHeader('业务情况')} key="2" forceRender>
					<Form
						form={businessSituationForm}
						name="basic"
						layout="horizontal"
						labelCol={{flex: '140px'}}
						labelAlign="right"
						labelWrap
						autoComplete="off"
						disabled={type === 'view' || type === 'process'}>
						<Row gutter={12}>
							<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
								<Form.Item
									label="业务模式"
									name="businessModel"
									rules={[{required: true}]}>
									<Select
										placeholder={
											type === 'view' ||
											type === 'process'
												? '-'
												: '请选择'
										}
										allowClear
										fieldNames={{
											value: 'dictKey',
											label: 'dictValue',
										}}
										options={dictData?.Business_Situation}
									/>
								</Form.Item>
							</Col>
						</Row>
						<table border="1" className={styles.uploadWrap}>
							<tr>
								<td style={{width: '130px'}}>主要客户合同</td>
								<td>{uploadDom(20, 'customerContractUrl')}</td>
								<td style={{width: '130px'}}>主要供应商合同</td>
								<td>{uploadDom(21, 'supplierContract')}</td>
								<td style={{width: '130px'}}>工商年检</td>
								<td>{uploadDom(22, 'serviceInspectionUrl')}</td>
							</tr>
							<tr>
								<td colSpan={6}>
									<OtherUpload
										targetAttr={33}
										urlName="serviceOtherDocumentUrl"
										fileList={serviceOtherDocumentList}
										setFileList={
											setServiceOtherDocumentList
										}
										enclosureList={enclosureList}
										urlData={urlData}
										setUrlData={setUrlData}
									/>
								</td>
							</tr>
						</table>
					</Form>
				</Panel>
				<Panel header={customizeHeader('其他信息')} key="3" forceRender>
					<Form
						name="outer"
						autoComplete="off"
						disabled={type === 'view' || type === 'process'}>
						<table border="1" className={styles.uploadWrap}>
							<tr>
								<td>人员组织结构</td>
								<td>
									{uploadDom(23, 'organizationStructureUrl')}
								</td>
								<td>社会保险登记证</td>
								<td>
									{uploadDom(24, 'insuranceCertificateUrl')}
								</td>
								<td>社保缴费凭证</td>
								<td>
									{uploadDom(25, 'socialPayCertificateUrl')}
								</td>
							</tr>
							<tr>
								<td>最近财务报表</td>
								<td>{uploadDom(26, 'recentReportsUrl')}</td>
								<td>最新税务申报表</td>
								<td>{uploadDom(27, 'taxDeclarationUrl')}</td>
								<td>公司设计诉讼/仲裁情况</td>
								<td>
									{uploadDom(28, 'companyArbitrationUrl')}
								</td>
							</tr>
							<tr>
								<td>公司设计的行政处罚情况</td>
								<td>
									{uploadDom(29, 'administrativePenaltyUrl')}
								</td>
								<td>交易合同价值配套的抵押物</td>
								<td>
									{uploadDom(30, 'supportingCollateralUrl')}
								</td>
							</tr>
							<tr>
								<td colSpan={6}>
									<OtherUpload
										targetAttr={31}
										urlName="otherFileUrl"
										fileList={fileList}
										setFileList={setFileList}
										enclosureList={enclosureList}
										urlData={urlData}
										setUrlData={setUrlData}
									/>
								</td>
							</tr>
						</table>
					</Form>
				</Panel>
			</Collapse>
		</div>
	)
}

export default forwardRef(assets)
